import { AppBar, Box, Button, Divider, Stack, Tabs, Toolbar, Typography } from '@mui/material';
import React, { JSX } from 'react';
import { useParams, useNavigate, NavigateFunction } from 'react-router-dom';
import PersonIcon from '@mui/icons-material/Person';
import KeyIcon from '@mui/icons-material/Key';
import FactoryIcon from '@mui/icons-material/Factory';
import StoreIcon from '@mui/icons-material/Store';
import InventoryIcon from '@mui/icons-material/Inventory';
import PrecisionManufacturingIcon from '@mui/icons-material/PrecisionManufacturing';
import { NulMainTab } from '../../components/NulMenu/NulMainTab';
import PersonalInformation from '../PersonalInformation';
import SupplierManagement from '../SupplierManagement';
import CommodityManagement from '../CommodityManagement';
import WarehouseManagement from '../WarehouseManagement';
import UserManagement from '../UserManagement';
import './index.css';
import InventoryManagement from '../InventoryManagement';
import { clearAuth } from '../../util/AuthHelper';

interface SiderProps {
  selected: number;
}

const moduleName: string[] = [
  '',
  'profile',
  'permissions',
  '',
  '',
  'supplier',
  'commodity',
  '',
  '',
  'warehouse',
  'inventory',
];

function MainFramework(): JSX.Element {

  const { id } = useParams();

  const navigate: NavigateFunction = useNavigate();

  const moduleList: (JSX.Element | undefined)[] = [
    undefined,
    (<PersonalInformation />),
    (<UserManagement />),
    undefined,
    undefined,
    (<SupplierManagement />),
    (<CommodityManagement />),
    undefined,
    undefined,
    (<WarehouseManagement />),
    (<InventoryManagement />),
  ];

  let content: JSX.Element | undefined = undefined;
  let contentIndex: number = 0;
  if (id !== undefined) {
    contentIndex = moduleName.indexOf(id);
    content = moduleList[contentIndex];
  }

  React.useEffect(() => {
    if (id === undefined || id === '' || id in moduleName) {
      navigate('/main/profile');
    }
  }, [id, navigate]);

  const onExitClicked = () => {
    clearAuth();
    navigate('/login');
  };

  return (
    <div id='nul-main-framework'>
      <Box sx={{ minHeight: '100vh', width: '100%', display: 'flex', flexDirection: 'column' }}>
        <AppBar position="static" sx={{
          height: '50px', boxShadow: 'none', background: '#1565c0', display: 'flex', alignContent: 'center', justifyContent: 'center',
          width: '100%'
        }}>
          <Toolbar sx={{ height: '50px' }}>
            <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
              Sale Management System
            </Typography>
            <Button color="inherit" onClick={onExitClicked}>Exit</Button>
          </Toolbar>
        </AppBar>
        <Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'row' }} >
          <Box>
            <Sider selected={contentIndex} />
          </Box>
          <Box sx={{ flex: 'none', order: 1, flexGrow: 1, position: 'relative' }}>
            {content}
          </Box>
        </Box>
        <Box width='100%' height='40px' marginBottom={0}>
          <Footer />
        </Box>
      </Box>
    </div>
  )
}

function Footer(): JSX.Element {
  return (
    <Box sx={{
      background: '#1565c0',
      height: '100%',
      bottom: 0,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      flexDirection: 'column'
    }}>
      <Box
        sx={{
          color: '#FFFFFF',
          fontSize: '14px',
          fontFamily: 'Open Sans'
        }}
      >
        Copyright (C) NulStudio 2014-2023.
      </Box>
    </Box>
  )
}

function Sider(props: SiderProps): JSX.Element {

  const navigate = useNavigate();

  const handleChange = (event: React.SyntheticEvent, newValue: number): void => {
    if (newValue !== props.selected) {
      navigate('/main/' + moduleName[newValue]);
    }
  };

  return (
    <Box sx={{ borderRight: '1px solid #DFE4E8', height: '100%' }}>
      <Stack
        justifyContent='flex-start'
        sx={{
          paddingBottom: '12px',
          backgroundColor: '#ffffff',
          boxSizing: 'border-box',
        }}
      >
        <Tabs
          orientation="vertical"
          variant="scrollable"
          value={props.selected}
          aria-label="Vertical tabs example"
          onChange={handleChange}
          sx={{ justifyContent: 'flex-start' }}
          TabIndicatorProps={{
            style: {
              display: 'none',
            },
          }}
        >
          <Box className='SiderText'>
            User Management
          </Box>
          <NulMainTab
            icon={<PersonIcon sx={{ fontSize: '18px' }} />}
            label='Personal Information'
          />
          <NulMainTab
            icon={<KeyIcon sx={{ fontSize: '18px' }} />}
            label='User Management'
          />
          <Divider />
          <Box className='SiderText'>
            Basic Management
          </Box>
          <NulMainTab
            icon={<FactoryIcon sx={{ fontSize: '18px' }} />}
            label='Supplier Management'
          />
          <NulMainTab
            icon={<StoreIcon sx={{ fontSize: '18px' }} />}
            label='Commodity Management'
          />
          <Divider />
          <Box className='SiderText'>
            Inventory Management
          </Box>
          <NulMainTab
            icon={<PrecisionManufacturingIcon sx={{ fontSize: '18px' }} />}
            label='Warehouse Management'
          />
          <NulMainTab
            icon={<InventoryIcon sx={{ fontSize: '18px' }} />}
            label='Inventory Management'
          />
        </Tabs>
      </Stack>
    </Box >
  );
}

export default MainFramework;